<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/include/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>${map.bussName}</title>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript"
            src="${path}/static/taoshunda/share/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery.SuperSlide.2.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/jquery.mCustomScrollbar.css"/>
    <style type="text/css">

        html, body {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: #efefef;
        }

        .box {
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
        }

        .item {
            flex-grow: 1;
        }

        .showLetter {
            position: fixed;
            color: #03a9f4;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            border: #03a9f4 1px solid;
            text-align: center;
            display: none;
        }

        .showLetter span {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
        }

        .clFlexBox {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        /* 本例子css */
        .slideBox {
            width: 100%;
            overflow: hidden;
            position: relative;
            border: 1px solid #ddd;
        }

        .slideBox .hd {
            height: 15px;
            overflow: hidden;
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 1;
        }

        .slideBox .hd ul {
            overflow: hidden;
            zoom: 1;
            float: left;
        }

        .slideBox .hd ul li {
            float: left;
            margin-right: 2px;
            width: 10px;
            height: 10px;
            line-height: 14px;
            text-align: center;
            background: #bbb6ba;
            cursor: pointer;
            border-radius: 100%;
            margin-right: 10px;
        }

        .slideBox .hd ul li.on {
            background: #31a3ec;
        }

        .slideBox .bd {
            position: relative;
            height: 100%;
            z-index: 0;
        }

        .slideBox .bd li {
            zoom: 1;
            vertical-align: middle;
        }

        .slideBox .bd img {
            display: block;
            width: 100%;
        }

        .current {
            color: #3c81f6;
            border-bottom: 2px solid #3c81f6;
        }

        .backCurrent {
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="mainScroll" style="height: 100%;overflow: auto">
    <div>
        <div id="slideBox" class="slideBox">
            <div class="hd">
                <ul>
                    <c:forEach items="${bannerImagesArr}" var="Image">
                        <li></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="bd">
                <ul>
                    <c:forEach items="${bannerImagesArr}" var="Image">
                        <li><img src="http://www.taoshunda.com/images/${Image}" style="height: 220px;"/></li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="public-background public-overflow" style="padding-top:10px;padding-bottom:20px;">
            <div class="box public-padding">
                <div style="text-align:center;flex-basis:90px;">
                    <img src="http://www.taoshunda.com/images/${map.bussLogo}" width="70" height="70" alt=""
                         style="border-radius: 1000px;margin: 0 auto;"/>
                </div>
                <div class="item">
                    <div style="font-size:14px;padding-left:10px;margin-top:12px;margin-bottom:10px;">
                        ${map.goodsNumber}件商品<span style="padding-left: 5px;padding-right:5px;">|</span>
                        月售${map.orderCount}单<span style="padding-left: 5px;padding-right:5px;"></span>
                        <%--${map.distace*1000}m--%>
                    </div>
                    <div style="font-size:14px;padding-left:10px;">
                        配送￥0.00
                    </div>
                </div>
                <div class="item" style="text-align: right;">
                    <div style="text-align: right;float: right;">
                        <div style="font-size:14px;color:#ffffff;background: #f96e11;line-height: 30px;border-radius:1000px;width:70px;text-align:center;margin-top:20px;">
                            <a href="http://www.taoshunda.com/setup/user.html" style="color: #ffffff;">商家详情</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="public-padding">
                <div style="font-size: 14px;color: #666666;margin-top:2px;" class="text-overflow">
                    <c:if test="${map.isInvoice==1}">
                        <span style="background: #cd8cfe;color: #ffffff;display: inline-block;width: 40px;line-height:24px;text-align:center;border-radius:2px;margin-right:10px;font-size: 14px;">发票</span>
                        本店支持开具发票
                    </c:if>
                </div>
                <div style="font-size: 14px;color: #666666;margin-top:2px;" class="text-overflow">
                    <c:if test="${not empty map.couponList}">
                    <span style="background: #FF5D73;color: #ffffff;display: inline-block;width: 40px;line-height:24px;text-align:center;border-radius:2px;margin-right:10px;font-size: 14px;">满减</span>
                    <c:forEach items="${map.couponList}" var="couponList">
                    <span style="padding-right: 5px;">${couponList.name}
                        </c:forEach>
                    </c:if>
                </div>
                <div style="font-size: 14px;color: #666666;margin-top:2px;" class="text-overflow">
                    <c:if test="${not empty map.promotionList}">
                        <span style="background: #f8c020;color: #ffffff;display: inline-block;width: 40px;line-height:24px;text-align:center;border-radius:2px;margin-right:10px;font-size: 14px;">活动</span><span
                            style="padding-right: 10px;">${map.promotionList}</span>
                    </c:if>
                </div>
            </div>
        </div>
        <div style="height:10px;background: #efefef;">

        </div>
        <div class="public-overflow">
            <div class="public-background public-overflow public-border-bottom">
                <div>
                    <ul class="public-font-five">
                        <li class="public-left text-align-center" style="width: 50%;line-height:54px;">商品</li>
                        <li class="public-right text-align-center" style="width: 50%;line-height:54px;color:#6a6a6a;"
                            onclick="javascript:location.href='http://www.taoshunda.com/setup/user.html' ">联系商家
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="public-overflow" style="padding-bottom: 50px">
        <div>
            <div style="width: 25%;background: #efefef;" class="public-left hour-information-content-box2">
                <ul class="clickLeft letter">
                    <c:forEach items="${goods}" var="type" varStatus="st">
                        <c:if test="${st.index == 0}">
                            <li style="line-height:50px;" class="public-font-seven text-align-center backCurrent"
                                letter="y${type.id}">${type.typeName}</li>
                        </c:if>
                        <c:if test="${st.index != 0}">
                            <li style="line-height:50px;" class="public-font-seven text-align-center "
                                letter="y${type.id}">${type.typeName}</li>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
            <div style="width: 75%;" class="public-right public-background hour-information-content-box">
                <div class="public-padding public-border-bottom">
                    <c:forEach items="${goods}" var="type">
                        <p style="padding-top:10px;" id="y${type.id}"><span
                                style="background: #f47311;width:6px;height:26px;border-radius: 100px;display: inline-block;vertical-align: middle;margin-right:10px;margin-bottom:5px;"></span><span
                                class="titleHtml">${type.typeName}</span></p>
                        <c:forEach items="${type.goodsList}" var="goods">


                            <div class="public-border-bottom">
                                <div style="margin-top:10px;" class="public-overflow">
                                    <div style="width: 40%;" class="public-left">
                                        <img src="http://www.taoshunda.com/images/${goods.headPic}" width="100%"
                                             height="100" alt="" style="border-radius: 8px;"/>
                                    </div>
                                    <div style="width: 60%;" class="public-right">
                                        <div class="public-padding">
                                            <p class="text-overflow public-font-weight">${goods.goodsName}</p>
                                            <p class="text-overflow public-color-five public-font-twelve"
                                               style="padding-top:10px;padding-bottom:10px;">月售${goods.monthSales}单</p>
                                            <p class="text-overflow public-font-eleven public-font-weight"
                                               style="color:#f47311;">￥${goods.price}/${goods.unit}</p>
                                        </div>
                                    </div>
                                </div>
                                <c:if test="${goods.isNoReasonReturn == 1}">
                                    <div style="border: 1px solid #f47311;color:#f47311;width:55%;margin-top:10px;margin-bottom:10px;"
                                         class="public-font-twelve text-align-center">
                                        支持7天无理由退换货
                                    </div>
                                </c:if>
                            </div>
                        </c:forEach>
                    </c:forEach>
                </div>
            </div>
            <div style="background: #4183ff;line-height:50px;text-align: center;display: inline-block;position: fixed;left:0;bottom: 0;width: 100%;font-size: 16px;">
                <button style="width: 100%; line-height:50px;background: #FF6D13;" id="btn"
                        location="'http://www.taoshunda.com/setup/user.html'"><a
                        href="http://www.taoshunda.com/setup/user.html" id="link"
                        style="color: #ffffff;">点击下载淘瞬达app，淘您所爱 一瞬即达</a>
                </button>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript">
    $(function () {
        jQuery(".slideBox").slide({mainCell: ".bd ul", autoPlay: true});
        $('.clickType li').click(function () {
            var type = $(this).attr('type')
            $(this).addClass('current').siblings().removeClass('current')
        })

    })
    $('body').on('click', '.letter li', function () {
        $(this).addClass('backCurrent').siblings().removeClass('backCurrent')
        var s = $(this).attr('letter');
        $("hour-information-content-box").mCustomScrollbar("scrollTo", $('#' + s).offset().top + 46);
    });
    var clientHeight = window.screen.availHeight;
    $('.hour-information-content-box').css('height', (clientHeight - 300));
    $('.hour-information-content-box2').css('height', (clientHeight - 300))
    $(".hour-information-content-box").mCustomScrollbar({
        axis: "y",
        theme: "dark",
    });

    document.getElementById("btn").onclick = function () {
        document.getElementById("link").click();
    }

</script>

